<script setup lang="ts">
// https://mrhj.gitee.io/form-generator/#/ 表单设计器
import { ref, reactive, onMounted, defineEmits } from "vue";
import type { FormRules } from "element-plus";
import { addUserForm, addUser } from "@/api/sys/user";
import { getRoleList } from "@/api/sys/role";
import { getOrgList } from "@/api/sys/org";

const emit = defineEmits(["onSearchEnv"]);
const onSearchTable = () => {
  emit("onSearchEnv");
};

const userForm = ref<addUserForm>();
const dialogVisible = ref(false);

const showdialogForAddUser = () => {
  userForm.value = {
    username: "",
    password: "",
    status: 1,
    accountLv: 2,
    nickname: "",
    email: "",
    cityCode: "",
    roleIds: ["3"],
    orgId: "2"
  };
  dialogVisible.value = true;
};

const rules = reactive<FormRules>({
  username: [
    {
      required: true,
      message: "请输入用户账号",
      trigger: "blur"
    }
  ],
  nickname: [],
  status: [
    {
      required: true,
      message: "状态不能为空",
      trigger: "change"
    }
  ],
  email: [],
  roleIds: [
    {
      required: true,
      type: "array",
      message: "请至少选择一个角色",
      trigger: "change"
    }
  ],
  deptId: [
    {
      required: true,
      message: "请选择用户所属部门",
      trigger: "change"
    }
  ]
});
const statusOptions = [
  {
    label: "正常",
    value: 1
  },
  {
    label: "冻结",
    value: 2
  }
];
const accessLvOptions = [
  {
    label: "管理员",
    value: 2
  },
  {
    label: "用户",
    value: 3
  }
];
const roleList = ref<any>([]);

const orgList = ref<any>([]);

onMounted(() => {
  getRoleList().then(res => {
    const li = [];
    res.forEach(item => {
      li.push({
        label: item.roleName,
        value: item.roleId
      });
      roleList.value = li;
    });
  });
  getOrgList().then(res => {
    const li = [];
    res.forEach(item => {
      li.push({
        label: item.orgName,
        value: item.id
      });
      orgList.value = li;
    });
  });
});

const onSubmit = () => {
  addUser(userForm.value).then(() => {
    dialogVisible.value = false;
    onSearchTable();
  });
};

defineExpose({
  showdialogForAddUser
});
</script>

<template>
  <el-dialog v-model="dialogVisible" title="添加用户">
    <el-form ref="elForm" :model="userForm" :rules="rules" label-width="100px">
      <el-form-item label="账号" prop="username">
        <el-input
          v-model="userForm.username"
          placeholder="请输入用户账号"
          :maxlength="20"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input
          v-model="userForm.nickname"
          placeholder="请输入用户昵称，未输入默认按账户填充"
          :maxlength="20"
          show-word-limit
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="userForm.password"
          placeholder="请输入密码，未输入按默认密码填充"
          :maxlength="20"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="userForm.status">
          <el-radio
            v-for="(item, index) in statusOptions"
            :key="index"
            :label="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="账户级别" prop="accountLv">
        <el-radio-group v-model="userForm.accountLv">
          <el-radio
            v-for="(item, index) in accessLvOptions"
            :key="index"
            :label="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input
          v-model="userForm.email"
          placeholder="请输入用户邮箱"
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="行政编码" prop="cityCode">
        <el-input
          v-model="userForm.cityCode"
          placeholder="请输入用户所在城市的行政编码"
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="角色" prop="roleIds">
        <el-checkbox-group v-model="userForm.roleIds">
          <el-checkbox
            v-for="(item, index) in roleList"
            :key="index"
            :label="item.value"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="部门" prop="orgId">
        <el-select
          v-model="userForm.orgId"
          placeholder="请选择用户所属部门"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in orgList"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>
